<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
import { getProvinceMapInfo } from '@/utils/map_utils'
//主题
import data from '../../../static/theme/chalk.json'
import data1 from '../../../static/theme/vintage.json'

//地图信息
import map from '../../../static/map/china.json'
import { useStore } from 'vuex'
const store = useStore()
const seller_ref = ref(null) //ref
const chartInstance = ref(null) //实例化
const allData = ref(null) //总数据
let mapData = {}
//点击事件
const revertMap = () => {
  chartInstance.value.setOption({
    geo: {
      map: 'china'
    }
  })
}
// 初始化echartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  echarts.registerTheme('vintage', data1)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(
    echarts.init(seller_ref.value, store.state.visual.theme)
  )
  //注册地图
  echarts.registerMap('china', map)
  const initOption = {
    title: {
      text: '▎ 商家分布',
      left: 20,
      top: 20
    },
    //初始化地图
    geo: {
      type: 'map',
      map: 'china',
      top: '5%',
      bottom: '5%',
      //地图颜色
      itemStyle: {
        areaColor: '#2E72BF',
        borderColor: '#333'
      }
    },
    legend: {
      left: '5%',
      bottom: '5%',
      orient: 'vertical'
    }
  }
  chartInstance.value.setOption(initOption)
  chartInstance.value.on('click', (arg) => {
    //arg.name是省份名字,用方法掉出来路径和名字
    const provinceInfo = getProvinceMapInfo(arg.name)
    //缓存
    if (!mapData[provinceInfo.key]) {
      axios.get('../..' + provinceInfo.path).then((res) => {
        mapData = res.data
        //重新初始化一份
        echarts.registerMap(provinceInfo.key, res.data)
        //重新初始化
        chartInstance.value.setOption({
          geo: {
            map: provinceInfo.key
          }
        })
      })
    }
  })
}

//获取数据
const getData = () => {
  axios.get('../../../static/data/map.json').then((res) => {
    allData.value = res.data
    updateChart()
  })
}
//更新图表
const updateChart = () => {
  // 图例数据
  const legendData = allData.value.map((item) => {
    return item.name
  })
  // 散点数据
  const seriesArr = allData.value.map((item) => {
    return {
      //涟漪效果
      type: 'effectScatter',
      //涟漪效果配置
      rippleEffect: {
        scale: 5,
        brushType: 'stroke'
      },
      //地图显示散点数据必传此项
      coordinateSystem: 'geo',
      name: item.name,
      data: item.children
    }
  })
  const dataOption = {
    legend: {
      data: legendData
    },
    series: seriesArr
  }
  chartInstance.value.setOption(dataOption)
}

// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  let titleFontSize = (seller_ref.value.offsetWidth / 100) * 5
  //分辨率大小相关的配置项
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize
      }
    },
    legend: {
      itemWidth: titleFontSize / 2,
      itemHeight: titleFontSize / 2,
      itemGap: titleFontSize / 2,
      textStyle: {
        fontSize: titleFontSize / 2
      }
    }
  }
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  window.onresize = null
})
defineExpose({
  screenAdapter
})
watch(
  () => store.state.visual.theme,
  () => {
    chartInstance.value.dispose()
    initChart() // 重新以最新的主题名称初始化图表对象
    screenAdapter() // 完成屏幕的适配
    updateChart() // 更新图表的展示
  }
)
</script>

<style lang="scss" scoped></style>
